/**
 * var providerObj;
 * 是一个变量声明
 * 1.存储元素应用：
 * 如果providerObj用来存储DOM元素或jQuery对象的引用，它可能用于后续操作中。
 * 例如假设providerObj存储一个供应商的行元素或某个按钮的jQuery对象,以便在删除或更新时访问它。
 *2.存储数据:providerObj也可以用于存储某个包含供应商数据的对象(比如JSON对象).
 * 3.最为全局变量:在一些情况下，providerObj可能是全局变量，在多个函数或不同的代码块中共享。
 * 这种情况下，providerObje可能在不同的操作中被访问，修改或更新。
 * 4.在事件处理中使用:如果它与事件处理相关，providerObj可能本用来存储对象与某个特定操作相关的数据。
 * 例如，当用户点击某个按钮时，它可能保存那个按钮的相关信息
 * 总结:var providerObj的作用是定义一个空变量，通常用作后续存储或引用对象的容器。
 */
var providerObj;

//供应商管理页面上点击删除按钮弹出删除框(providerlist.jsp)
/**
 *function deleteProvider(obj):void是一个TypeScript函数声明，其中包括了函数的名称,参数和返回类型。
 * 2.参数：obj
 * 函数的参数obj是传递给函数的数据，在这个上下文中，obj很可能是jQuery对象或者DOM元素，代表页面上的某个元素。
 * 例如可能是一个点击了删除按钮的DOM元素，或者是一个jQuery对象，包含了删除操作所需的相关信息。
 * 在deleteProvider函数内部，obj会被用来获取该元素的一些属性(如proid和proname),然后用这些信息发起AJAX请求来删除供应商。
 * 3.返回类型:void
 * : void表示该函数不会返回任何值。
 * void是TypeScript中的一个类型，意味着这个函数的执行不会有返回值，也不需要return语句。
 * 在JavaScript中，函数通常可以不返回值，但TyepScript强制要求你明确指定，如果函数不返回任何内容,就需要标明器返回类型是void。
 * 这对于类型检查来说很有帮助
 * 总结:deleteProvider(obj) : void 是一个删除操作的函数，它不返回任何值。
 * 通过接收一个obj参数，通常是一个DOM元素或jQuery对象,函数会用该元素的信息发起AJAX请求，删除指定的供应商。
 */
function deleteProvider(obj){
	/**
	 * $.ajax()是jQuery库提供的一个方法,用于执行异步HTTP请求(Ajax).
	 * 它使得网页能够与服务器进行交互而无需重新加载页面。
	 * 通过这个方法，前端可以向服务器发送数据或请求数据,并且根据响应结果进行后续操作
	 * 用途:主要用于与服务器交互，执行如数据提交，获取数据等操作。
	 * 通常用于提交表单，获取JSON数据等。
	 * 这行代码的作用是启动一个Ajax请求，接下来大括号{}中的内容是配置项，指定了如何处理请求，例如请求的类似等。
	 * 简单来说，$ajax({表示你将要设置一个Ajax请求，并且开始配置相关的参数。
	 */
	$.ajax({
		/**
		 * 在$.ajax()中，type用来指定这个请求使用的HTTP方法，具体含义如下:
		 * POST方法：表示你在向服务器发送数据，通常用于创建或修改资源。
		 * GET方法(默认)通常用于从服务器获取数据
		 */
		/**
		 * 为什么是POST不是DELETE?
		 * 虽然在HTTP协议中，DELETE方法用于表示删除操作，但子啊实际开发中，很多时候会使用POST来代替DELETE.
		 * 原因如下:
		 * 1.浏览器限制：
		 * 大部分浏览器在处理表单提交时，默认只支持GET和POST方法。
		 * 2.后端框架的兼容性
		 * 很多后端框架和服务器端语言的路由系统(如Express,Django,Spring)不总是支持HTTP中的所有方法(比如DELETE,PUT)
		 * 3.安全性和跨域问题:
		 * 一些浏览器阿紫进行跨域请求时，会组织某些HTTP方法(比如DELETE或PUT),而POST请求通常更容易通过跨域请求。
		 * 同时，POST请求通常不容易受到CSRF(跨站请求伪造)攻击，很多后端会默认允许POST方法执行修改操作，包括删除。
		 * 4.实践中的“POST用于修改”约定
		 * 在很多实际项目中，开发者和后端开发者约定，POST方法不仅用于创建资源，也可以用与修改或删除资源。
		 */
		type:"POST",
		/**
		 * del.json返回的数据是json的
		 */
		url:path+"/sys/provider/del.json",
		/**
		 * data:
		 * 这些数据会作为请求的主题部分发送给服务器
		 * proid是对象的键(key),它是你希望传递给服务器的字段名称
		 * obj.attr("proid")是从HTML元素obj获取proid属性的值。
		 * 具体来说，obj是指向某个HTML元素(可能是一个按钮，链接等)的jQuery对象，attr("proid")方法用来获取该元素的proid属性值
		 * 整体流程:
		 * data:{proid:obj.attr("proud")}表示通过AJAX请求发送一个包含供应商ID(proid)的数据对象。
		 * 服务器接收到这个请求后,可以根据传递的proi值去处理相应的删除操作
		 */
		data:{proid:obj.attr("proid")},
		/**
		 * dataType:"json"这一行带妹妹是在jQuery的AJAX请求中指定期望从服务器返回的数据格式
		 * 解释:
		 * dataType:"json"告诉jQuery在发送请求后，亲吻服务器返回的数据是JSON格式。
		 * JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，通常用于客户端和服务端之间的数据传输
		 */
		/**
		 * 为什么删除操作需要返回数据？
		 * 操作结果反馈:
		 */
		dataType:"json",
		/**
		 * success:function(data)这一行是jQuery AJAX请求中的回调函数，它定义了在AJAX请求成功完成时要执行的操作。
		 * 解释:
		 * 在你发起的AJAX请求中，success是一个配置项，用来指定当请求成功是应该执行的代码。
		 * 这个回调函数接收一个参数data,它包含了服务器返回的数据。
		 * 通过这个返回的数据,前端可以进行进一步的操作。
		 *data在$ajax()的success回调函数中并不是固定的名称,而是默认参数，它代表的是从后端返回的响应数据
		 * @param data
		 */
		success:function(data){
			if(data.delResult == "true"){//删除成功：移除删除行
				/**
				 * obj是触发事件的元素(通常是某个删除按钮)
				 * parents(父母)
				 * obj.parents("tr")会获取当前按钮所在的<tr>(表格行)元素
				 * .remoiv()方法会从DOM中删除这个<tr>
				 */
				/**
				 * 为什么要删除？
				 * 后端与前端显示不同的内容
				 * 只删前端可以吗？可以？但数据不一致
				 */
				obj.parents("tr").remove();
			}else if(data.delResult == "false"){//删除失败
				alert("对不起，删除供应商【"+obj.attr("proname")+"】失败");
			}else if(data.delResult == "notexist"){
				alert("对不起，供应商【"+obj.attr("proname")+"】不存在");
			}
		},
		/**
		 * error:function(data)这个部分是$.ajax请求中的一个回调函数，用于处理请求失败的情况。
		 * 1.网络问题
		 * 2.服务器错误
		 * 3.请求格式问题
		 * @param data
		 */
		error:function(data){
			alert("对不起，删除失败");
		}
	});
}

/**
 * 跳转到其他页面，无需更新页面，非异步
 */
/**
 * $(function() : void {...})是简写，等价与$(document).read(function(){...})
 *当页面完全加载，才能执行里面的函数,保证加载完成
 * 防止js操作未与标签联系完成：
 * 如果你把某些操作放在页面的前面，可能出现未找到页面元素。
 */
$(function(){
	/**
	 * ${".viewProvider}:
	 * ${".viewProvider}是一个jQuery选择器，它选中了页面中所有具有viewProvider类名的元素
	 * 这个选择器返回一个jQuery对象
	 * .on("click",function(){...})
	 * .on("click",function(){...})是jQuery提供的事件绑定方法,用来为选中的元素绑定一个点击事件(click)
	 * 它的语法是:$(selector).on(event,handler),其中selector是要选中的元素，event是触发的事件类型(比如click),handler是事件触发时要执行的回调函数
	 * 所以这行代码的意思是:
	 * 当页面中任何一个具有viewProvider类名的元素被点击时，都会执行里面的回调函数
	 *
	 */
	$(".viewProvider").on("click",function(){
		//将被绑定的元素（a）转换成jquery对象，可以使用jquery方法
		var obj = $(this);
		/**
		 * window.location是一个JavaScript,代表当前浏览器的URL地址
		 * window.location.href是一个字符串，表示浏览器当前的URL.
		 * 通过修改它的值，你可以浏览器跳转到新的页面
		 * obj.attr("proid")是jQuery的代码，用来获取当前点击元素obj(通常是一个按钮或链接)的proi属性的值。attr("proid")会返回改元素上的proid属性的值
		 * @type {string}
		 */
		window.location.href=path+"/sys/provider/view/"+ obj.attr("proid");
	});
	
	$(".modifyProvider").on("click",function(){
		var obj = $(this);
		window.location.href=path+"/sys/provider/modify/"+ obj.attr("proid");
	});


	$(".deleteProvider").on("click",function(){
		providerObj = $(this);
		var del = confirm("你确定要删除供应商【"+providerObj.attr("proname")+"】吗？");
		if (del)  {
			deleteProvider(providerObj);
	    } else {
	       alert("你取消删除！");
	    }
	});
});